<template>
  <div class="home">
    <div class="contain">
      <div class="title">您好，{{ userInfo.username }}</div>
      <div class="desc">{{ environment }}：欢迎使用智能家居云平台</div>
      <div v-if="rolesCode">
        <el-button v-if="rolesCode !== 'ROLE_ADMIN' && rolesCode !== 'PLATFORM_ADMIN'" type="linear" @click="jumpTo">进入产品开发</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'home',
  computed: {
    ...mapGetters(['rolesCode']),
    ...mapState({
      userInfo: (state) => state.user.userInfo
    }),
    environment() {
      let variable = ''
      if (process.env.VUE_APP_BASE_URL === 'http://10.111.115.183:81/') {
        variable = '开发环境'
      } else if (process.env.VUE_APP_BASE_URL === 'https://smart-home-test.miligc.com/') {
        variable = '测试环境'
      } else {
        variable = '正式环境'
      }
      return variable
    }
  },
  methods: {
    jumpTo() {
      this.$router.push({ path: '/product/product-list/index' })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  margin-top: 159px;
  text-align: center;

  .title {
    font-size: 14px;
    font-weight: 400;
    color: #252525;
  }

  .desc {
    margin-top: 14px;
    margin-bottom: 73px;
    font-size: 20px;
    font-weight: 600;
    color: #252525;
  }
}

::v-deep .el-button:active,
.el-button {
  color: #275FE8;
  border-color: #275FE8;
}
</style>
